<script setup lang="ts">
import {ref} from "vue";
import HomeAuthor from '../author/author.vue'
import NODATA from '@/assets/post/noData.png'
import {commonConsoleLog, ECode, iconFontAddress, PagePath} from "@/util/commonUtil";
import {createFromIconfontCN} from "@ant-design/icons-vue";
import {recorderBehavior} from "@/api/system/system";

const props = defineProps({
  postList: {
    type: Array<any>,
    required: true
  },
  isEnd: {
    type: Boolean,
    required: true
  },
  currentPage: {
    type: Number,
    required: true
  }
});
const emit = defineEmits(['loadMoreCurrentPage']);
// xss白名单配置
const options = ref({
  whiteList: {
    a: ['href', 'title', 'target'],
    span: ['class'],
    h1: ['class'],
    h2: ['class'],
    h3: ['class'],
    h4: ['class'],
    pre: [],
    code: ['class'],
    p: ['class']
  }
})
// 引入阿里图标库
const IconFont = createFromIconfontCN({
  scriptUrl: iconFontAddress,
});

function loadMore() {
  // 页数回调
  return emit('loadMoreCurrentPage', props.currentPage + 1);
}

function clickPostMethod(title: string, uid: string, type: number) {
  if (type == 1) {
    setTimeout(() => {
      recorderBehavior({
        "otherData": title,
        "bizUid": uid,
        "bizType": "BLOG",
        "behavior": "BLOG_CONTNET",
      }).then((response: any) => {
        if (response.code == ECode.SUCCESS) {
          commonConsoleLog("外联文章信息上报成功")
        }
      })
    }, 3000);
  }
}
</script>

<template>
  <section
      class="homePostMain mt-2.5 relative w-full lg:w-2/3 overflow-hidden min-h-[600px] float-left flex flex-col gap-5">
    <template v-for="(item) in postList" :key="item.uid">
      <div class="homePostCard relative overflow-hidden bg-white p-5 rounded-xl min-h-[180px] cursor-pointer">
        <div class="homeCardMain">
          <h3 class="mb-4">
            <a-row class="flex justify-between items-center">
              <a-col :span="18">
                <a class="text-[20px] line-clamp-1 hover:text-orange-500"
                   @click="clickPostMethod(item.title, item.uid, item.type)"
                   :href="item.type == 0 ? PagePath.PostInfoPath + item.oid : item.outsideLink"
                   :target="item.type == 0? '' : '_blank'">
                  {{ item.title }}
                </a>
              </a-col>
              <a-col :span="6">
                <!-- todo 文章角标(只完成置顶) -->
                <div class="h-full float-right">
                  <IconFont class="text-[36px]" type="icon-zd" v-if="item.isTop == 1"/>
                </div>
              </a-col>
            </a-row>
          </h3>
          <a-row class="flex justify-between">
            <a-col :span="18">
              <div
                  class="m-auto relative top-0 bottom-0 text-[14px] line-clamp-2 text-slate-400 leading-[2.5]"
                  v-html="$xss(item.summary, options)"></div>
            </a-col>
            <a-col :span="6">
              <div class="relative block max-h-24 mr-5 float-left overflow-hidden rounded-xl">
                <img class="w-full h-auto mb-2.5"
                     v-if="item.photoList"
                     v-lazy="item.photoList[0]"
                     :src="item.photoList[0]"
                     :key="item.photoList[0]" alt="">
                <div class="mask absolute top-0 bottom-0 left-0 right-0 rounded-xl hover:opacity-35"></div>
              </div>
            </a-col>
          </a-row>
          <!-- 首页作者详情 -->
          <HomeAuthor :item="item"/>
        </div>
      </div>
    </template>

    <!-- 首页文章到底 -->
    <div class="PostCardEnd flex justify-center items-center">
      <div class="lookMore text-slate-400 cursor-pointer hover:text-orange-500" v-if="!isEnd" @click="loadMore">
        加载更多
      </div>
      <div class="noMore text-slate-400 cursor-pointer" v-if="isEnd && postList.length > 0">我也是有底线的~</div>
      <a-empty v-if="isEnd && postList.length == 0"
               class="flex flex-col justify-center items-center"
               :image="NODATA"
               :image-style="{height: '280px'}">
        <template #description>
          <span class="text-slate-400">嘿！这里没有数据，就像沙漠里没水一样。</span>
        </template>
      </a-empty>
    </div>

  </section>
</template>

<style scoped lang="less">
.homePostMain {
  margin-bottom: var(--edge-tb);
}

.homePostCard {
  box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, .1);
  transition: all .6s ease;
  border: thin solid rgb(203 213 225);
}

</style>
